<!-- <template>
    <div class="staff_cLOCK_view">

        <div class="staff_box" v-if="UserList.length">
            <span style="color:white"> {{ workforceLabel }}</span>

            <div class="item" v-for="(item, index) in UserList" :key="index" @click="staffUserListClick(item)">
                <img v-if="item.hasClockin == 0" src="../../assets/imgx/heatremo.png" alt="">
                <img v-if="item.hasClockin == 1" src="../../assets/imgx/heatead.png" alt="">
                <div>{{ item.userName }}</div>
            </div>
        </div>
        <div class="staff_box" v-if="UserListArr1.length">
            <span style="color:white"> {{ workforceLabel }}</span>


            <div class="item" v-for="(item, index) in UserListArr1" :key="index" @click="staffUserListClick(item)">
                <img v-if="item.hasClockin == 0" src="../../assets/imgx/heatremo.png" alt="">
                <img v-if="item.hasClockin == 1" src="../../assets/imgx/heatead.png" alt="">
                <div>{{ item.userName }}</div>
            </div>
        </div>
        <div class="staff_box" v-if="UserListArr2.length">
            <span style="color:white"> {{ workforceLabel }}</span>

            <div class="item" v-for="(item, index) in UserListArr2" :key="index" @click="staffUserListClick(item)">
                <img v-if="item.hasClockin == 0" src="../../assets/imgx/heatremo.png" alt="">
                <img v-if="item.hasClockin == 1" src="../../assets/imgx/heatead.png" alt="">
                <div>{{ item.userName }}</div>
            </div>
        </div>
        <button @click="offCheck" v-if="UserListArr2.length || UserListArr1.length || UserList.length">一键下班打卡</button>
    </div>
</template>
<script>
import { checkOutAll } from "@/api/SettingsApi/index"
export default {
    created() {

        this.initWebSocket(process.env.VUE_APP_WEBSOCKET_API)

    },
    data() {
        return {
            websock: null, //建立的连接
            lockReconnect: false, //是否真正建立连接
            timeout: 3000, //3秒一次心跳
            timeoutObj: null, //外层心跳倒计时
            serverTimeoutObj: null, //内层心跳检测
            timeoutnum: null, //断开 重连倒计时
            UserList: [],
            UserListArr1: [],
            UserListArr2: [],
            UserListArr3: {},
            shiftId: "",
            workforceLabel: ""
        }
    },
    methods: {
        staffUserListClick(item) {
            this.$emit("staffUserListModel", item)

        },
        offCheck() {
            checkOutAll({ shiftId: Number(this.shiftId) }).then(res => {
                if (res.code == 200) {
                    console.log(res);
                } else {
                    this.$emit("stafTile", res)
                }
            })
        },

        initWebSocket(item) {
            //初始化weosocket

            this.websock = new WebSocket(item);

            this.websock.onopen = this.websocketonopen;
            this.websock.onmessage = this.websocketonmessage;
            this.websock.onerror = this.websocketonerror;
            this.websock.onclose = this.websocketclose;



        },
        reconnect() {
            //重新连接
            var that = this;
            if (that.lockReconnect) {
                // 是否真正建立连接
                return;
            }
            that.lockReconnect = true;
            //没连接上会一直重连，设置延迟避免请求过多
            that.timeoutnum && clearTimeout(that.timeoutnum);
            // 如果到了这里断开重连的倒计时还有值的话就清除掉
            that.timeoutnum = setTimeout(function () {
                //然后新连接
                that.initWebSocket(process.env.VUE_APP_WEBSOCKET_API)

                that.lockReconnect = false;
            }, 5000);
        },
        reset() {
            //重置心跳
            var that = this;
            //清除时间（清除内外两个心跳计时）
            clearTimeout(that.timeoutObj);
            clearTimeout(that.serverTimeoutObj);
            //重启心跳
            that.start();
        },
        start() {
            //开启心跳
            var self = this;
            self.timeoutObj && clearTimeout(self.timeoutObj);
            // 如果外层心跳倒计时存在的话，清除掉
            self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
            // 如果内层心跳检测倒计时存在的话，清除掉
            self.timeoutObj = setTimeout(function () {
                // 重新赋值重新发送 进行心跳检测
                //这里发送一个心跳，后端收到后，返回一个心跳消息，
                console.log(self.websock.readyState);
                if (self.websock.readyState == 1) {
                    //如果连接正常
                } else {
                    //否则重连
                    self.reconnect();
                }
                self.serverTimeoutObj = setTimeout(function () {
                    // 在三秒一次的心跳检测中如果某个值3秒没响应就关掉这次连接
                    //超时关闭
                    self.websock.close();
                }, self.timeout);
            }, self.timeout);
            // 3s一次
        },

        websocketonopen(e) {
            //连接建立之后执行send方法发送数据
            console.log("成功");
            this.start()
        },
        websocketonerror() {
            //连接建立失败重连
            console.log("失败");
          
            this.reset();

        },
        websocketonmessage(e) {
            //数据接收
            console.log(e);
            let data = JSON.parse(e.data)

            if (e.type == "SUCCESS") {
                console.log(data.data);
                this.UserListArr3 = e.data

            }
            if (data.type == "LIST") {
                console.log(data.data);
                this.workforceLabel = data.data
                this.UserList = data.data.clockingList
                console.log(this.UserList);
                this.shiftId = this.UserList[0].shiftId
            } else if (data.type == "NOW") {
                console.log(data.data);
                this.workforceLabel = data.data

                this.UserListArr1 = data.data.clockingList
                console.log(this.UserListArr1); this.shiftId = this.UserListArr1[0].shiftId

            } else if (data.type == "END") {
                console.log(data.data);
                this.workforceLabel = data.data

                this.UserListArr2 = data.data.clockingList
                console.log(this.UserListArr2);
                console.log(this.UserListArr1); this.shiftId = this.UserListArr2[0].shiftId


            }
            this.reset();

        },

        websocketclose(e) {
            //关闭
            console.log("断开连接");

        }
    }
}
</script>
<style lang="less" scoped>
.staff_cLOCK_view {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    .staff_box {
        width: 100%;
        height: 50px;
        display: flex;

        .item {
            display: flex;
            align-items: center;
            color: rgba(97, 199, 99, 1);
            margin-right: 21px;

            img {
                width: 22px;
                height: 22px;
            }
        }
    }

    button {
        background: none;
        width: 150px;
        height: 25px;
        color: #5B9FC3;
        opacity: 1;
        border: 0.44px solid #5B9FC3;
    }
}
</style> -->




<template>
    <div class="staff_cLOCK_view">

        <div class="staff_box" v-if="beforeShift">
            <span style="color:#61C763 ;margin-right: 10px;"> {{ beforeShift.workforceLabel }}:</span>
            <div class="staff_flex">
                <div class="item" v-for="(item, index) in beforeShift.clockingList" :key="index"
                    @click="staffUserListClick(item)">
                    <img v-if="item.hasClockin == 0" src="../../assets/imgx/heatremo.png" alt="">
                    <img v-if="item.hasClockin == 1" src="../../assets/imgx/heatead.png" alt="">
                    <div v-if="item.hasClockin == 0" class="on">{{ item.userName }}</div>
                    <div v-if="item.hasClockin == 1" class="off">{{ item.userName }}</div>
                </div>
            </div>

            <button @click="offCheck(beforeShift.shiftId)" v-if="beforeShift">一键下班打卡</button>

        </div>

        <div class="staff_box" v-if="currentShift">
            <span style="color:#61C763 ;margin-right: 10px;"> {{ currentShift.workforceLabel }}:</span>
            <div class="staff_flex">
                <div class="item" v-for="(item, index) in currentShift.clockingList" :key="index"
                    @click="staffUserListClick(item)">
                    <img v-if="item.hasClockin == 0" src="../../assets/imgx/heatremo.png" alt="">
                    <img v-if="item.hasClockin == 1" src="../../assets/imgx/heatead.png" alt="">
                    <div v-if="item.hasClockin == 0" class="on">{{ item.userName }}</div>
                    <div v-if="item.hasClockin == 1" class="off">{{ item.userName }}</div>
                </div>
            </div>

            <button @click="offCheck(currentShift.shiftId)" v-if="currentShift">一键下班打卡</button>

        </div>
        <div class="staff_box" v-if="afterShift">
            <span style="color:#61C763 ;margin-right: 10px;"> {{ afterShift.workforceLabel }}:</span>

            <div class="staff_flex">
                <div class="item" v-for="(item, index) in afterShift.clockingList" :key="index"
                    @click="staffUserListClick(item)">
                    <img v-if="item.hasClockin == 0" src="../../assets/imgx/heatremo.png" alt="">
                    <img v-if="item.hasClockin == 1" src="../../assets/imgx/heatead.png" alt="">
                    <div v-if="item.hasClockin == 0" class="on">{{ item.userName }}</div>
                    <div v-if="item.hasClockin == 1" class="off">{{ item.userName }}</div>
                </div>
            </div>
            <button @click="offCheck(afterShift.shiftId)" v-if="afterShift">一键下班打卡</button>
        </div>

    </div>
</template>
<script>
import { checkOutAll } from "@/api/SettingsApi/index"

import { getNowWorkforces } from "@/api/homeModeApi/index"
export default {
    created() {
        this.initWebSocket()

        this.time = setInterval(() => {
            this.initWebSocket()
        }, 300000)
    },

    data() {
        return {
            time: "",
            afterShift: {},
            currentShift: {},
            beforeShift: {},
            token: "",
            time: "",
            Id: "",
            title: ""
        }
    },

    beforeDestroy() {
        clearInterval(this.time)
    },
    methods: {
        childFun() {
            this.initWebSocket()

        },
        staffUserListClick(item) {
            this.$emit("staffUserListModel", item)

        },
        offCheck(item) {
            checkOutAll({ shiftId: item }).then(res => {
                if (res.code == 200) {

                } else {
                    this.$emit("checkOutBtn", res)
                }
            })
        },
        initWebSocket() {
            getNowWorkforces().then(res => {
                if (res.code == 200) {
                    console.log(res.data,22222222222222222222222222222222222);
                    this.afterShift = res.data.after
                    this.currentShift = res.data.current
                    this.beforeShift = res.data.before

                }

            })
            this.time = setInterval(() => {
                this.initWebSocket()
            }, 500000)
        }
    },
    beforeDestroy() {
        clearInterval(this.time)
    }
}
</script>
<style lang="less" scoped>
.on {
    width: 39px;
    height: 15px;
    font-size: 16px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #3F613F;
    line-height: 15px;
}

.off {
    width: 39px;
    height: 15px;
    font-size: 16px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #61C763;
    line-height: 15px;
}

.staff_cLOCK_view {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;

    .staff_box {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .staff_flex {
            flex: 1;
            display: flex;

            .item {
                display: flex;
                align-items: center;
                color: rgba(97, 199, 99, 1);
                margin-right: 21px;

                img {
                    width: 22px;
                    height: 22px;
                }
            }
        }
    }

    button {
        background: none;
        width: 95px;
        height: 25px;
        color: #5B9FC3;
        opacity: 1;
        border: 0.44px solid #5B9FC3;
    }
}
</style>